<template>
    <div class="jx-content">
        <div class="navBoxs">
            <span class="reportTemplate"  @click="toggleTabs(0)" :class="{templateCheck:cur==0}">实验课报告模版</span>
            <span class="testTemplate"  @click="toggleTabs(1)"  :class="{templateCheck:cur==1}">实验考试报告模版</span>
        </div>
        <div  v-show="cur==0">
            <div class="titleBox">
                <i></i>Word版本
                <span class="telement-common" v-if="ownFlag==false">通用模板</span>
                <span class="telement-me" v-if="ownFlag==true">我的模板</span>
            </div>
            <div class="fileUploadBox">
                <button class="button-style uploadBtn">上 传<input id="version-file-input" type="file" title=""  @change="getFile"></button>
                <span v-if="versionFile!=''" >
                    <span style='margin-top:10px;' >{{versionFile}}</span>
                    <i class="iconfont icon-shanchu" @click="deleteFn"></i>
                    <i class="iconfont icon-xiazai" @click="reportDown"></i>
                    <!-- <a target="_blank" href="javascript:;" @click="reportDown">实验报告模板</a> -->
                </span>
            </div>
            <div class="titleBox">
                <i></i>在线编辑版本
                <span class="telement-common" v-if="ownFlagEduitor==false">通用模板</span>
                <span class="telement-me" v-if="ownFlagEduitor==true">我的模板</span>
            </div>
            <mavonEditor ref="lessionFile" style="z-index:1" class="lessionFiles" ></mavonEditor>
            <div class="saveBox">
                <button @click="getHtml" class="button-style">保 存</button>
            </div>
        </div>
        <div  v-show="cur==1">
            <div class="titleBox">
                 <i></i>Word版本
                <span class="telement-common" v-if="ownFlag==false">通用模板</span>
                <span class="telement-me" v-if="ownFlag==true">我的模板</span>
            </div>
            <div class="fileUploadBox">
                <button class="button-style uploadBtn">上 传<input id="version-file-input" type="file" title=""  @change="getFileWord"></button>
                <span v-if="versionWord!=''" >
                    <span style='margin-top:10px;' >{{versionWord}}</span>
                    <i class="iconfont icon-shanchu" @click="deleteFile"></i>
                     <i class="iconfont icon-xiazai" @click="textFn"></i>
                </span>
            </div>
            <div class="titleBox">
                <i></i>在线编辑版本
                <span class="telement-common" v-if="ownFlagEduitor==false">通用模板</span>
                <span class="telement-me" v-if="ownFlagEduitor==true">我的模板</span>
            </div>
            <mavonEditor ref="ReportFile" class="lessionFiles"></mavonEditor>
            <div class="saveBox">
                <button @click="WordFn" class="button-style">保 存</button>
            </div>
        </div>
    </div>
</template>
<script>
import mavonEditor from "../../../components/mavonEditor";
    export default{
        components: { mavonEditor },
        data(){
            return{
                versionFile:'',
                versionWord:'',
                pathUrl:'',
                path:'',
                //哪种模板标识
                ownFlag:'',
                ownFlagEduitor:'',
                //默认选中第一个tab
                cur:0 ,
                //实验报告
                reportExame:'',
                //实验考试
                testExame:'',
            }
        },
        created() {
          this.init()
          this.UrFn()
        },
        methods:{
            //实验报告模板
            init(){
               let self = this
                self.$http.get('/tes/template?type=1').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        if(res.data.templateWord.data){
                            self.versionFile = res.data.templateWord.data.name
                            self.pathUrl = res.data.templateWord.data.filePath
                            self.ownFlag= res.data.templateWord.ownFlag
                            self.reportExame = res.data.templateWord.data.fileName
                        }
                        if(res.data.templateOnline.data){
                             self.$refs.lessionFile.value = res.data.templateOnline.data.editContent
                             self.ownFlagEduitor = res.data.templateOnline.ownFlag
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //实验考试模板
            UrFn(){
               let self = this
                self.$http.get('/tes/template?type=2').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        if(res.data.templateWord.data){
                           self.versionWord = res.data.templateWord.data.name
                           self.path = res.data.templateWord.data.filePath
                           self.ownFlag = res.data.templateWord.ownFlag
                           self.testExame = res.data.templateWord.data.fileName
                        }
                        if(res.data.templateOnline.data){
                             self.$refs.ReportFile.value = res.data.templateOnline.data.editContent
                             self.ownFlagEduitor = res.data.templateOnline.ownFlag
                        }

                       // console.log( this.ownFlag)
                       //console.log( this.ownFlagEduitor)
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            toggleTabs(index){
                this.cur = index;
                //  if(this.cur==0){
                //     this.init()
                //  }else{
                //   this.UrFn()
                //  }
            },

           //保存文件
            getHtml(){
                //this.imgAdd()
                let editorContent = this.$refs.lessionFile.value;
                let self = this
                self.$http.post('/tes/template/online?type=1&resourceType=11',{
                    editorContent:editorContent
                }).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        self.init()
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //保存文件
            WordFn(){
                //this.imgAdd()
                let editorContent = this.$refs.ReportFile.value;
                let self = this
                self.$http.post('/tes/template/online?type=2&resourceType=11',{
                    editorContent:editorContent
                }).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                         self.UrFn()
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //下载实验报告
            reportDown(){
                 let self = this
                 self.$http.post('/tes/template/download/permission?type=1',{
                    fileName : self.reportExame
                }) .then((response) => {
                 let res = response.data
                 if(res.code == '200'){
                        self.token=res.data
                        let downloadElement = document.createElement('a');
                        downloadElement.style.display = 'none';
                        downloadElement.href = '/tes/template/download?type=1&token='+self.token
                        downloadElement.download = self.versionFile; //下载后文件名
                        document.body.appendChild(downloadElement);
                        downloadElement.click(); //点击下载
                        //document.body.removeChild(downloadElement); //下载完成移除元素
                    }else{
                        self.$message.error(res.message)
                    }
                 })
                //这是张瑞的方式
                // let self = this
                // self.$http.post('/tes/template/download?type=1',{
                //     fileName : self.reportExame
                // }).then((response) => {
                //     let res = response.data
                //     if(res.code == '200') {
                //         self.$downloadfile.download(res.data,self.versionFile);
                //     }else{
                //         self.$message.error(res.message)
                //     }
                // })
                //这是最开始的方式
                // let self = this
                // self.$http.post('/tes/template/download?type=1',{
                //     fileName : self.reportExame
                // },{responseType: 'blob'}) .then((response) => {
                //     let blob = new Blob([response.data], {type: response.headers['content-disposition']});
                //     let fileName = self.versionFile
                //     let url = window.URL.createObjectURL(blob);
                //     let downloadElement = document.createElement('a');
                //     downloadElement.style.display = 'none';
                //     downloadElement.href = url;
                //     downloadElement.download = fileName; //下载后文件名
                //     document.body.appendChild(downloadElement);
                //     downloadElement.click(); //点击下载
                //     document.body.removeChild(downloadElement); //下载完成移除元素
                //     window.URL.revokeObjectURL(url);
                // }).catch(err => {
                //       console.log(err)
                // })
            },
            //下载实验考试
            textFn(){
                 let self = this
                 self.$http.post('/tes/template/download/permission?type=2',{
                    fileName : self.testExame
                }) .then((response) => {
                 let res = response.data
                 if(res.code == '200'){
                        self.token=res.data
                        let downloadElement = document.createElement('a');
                        downloadElement.style.display = 'none';
                         downloadElement.href = '/tes/template/download?type=2&token='+self.token
                        downloadElement.download = self.versionWord; //下载后文件名
                        downloadElement.click(); //点击下载
                        //document.body.removeChild(downloadElement); //下载完成移除元素
                    }else{
                        self.$message.error(res.message)
                    }
                 })
            },

            //实验课删除
            deleteFn(){
                let self = this;
                self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
                self.$http.delete('/tes/template?type=1').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                         self.versionFile=''
                         self.init()

                    }else{
                        self.$message.error(res.message)
                    }
                 })
                }).catch(err => {
                    console.log(err)
                })
            },
            //实验考试删除
            deleteFile(){
                let self = this;
                self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
                self.$http.delete('/tes/template?type=2').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                         self.versionWord=''
                         self.UrFn()
                    }else{
                        self.$message.error(res.message)
                    }
                 })
                }).catch(err => {
                     console.log(err)
                })
            },
            //实验课上传文件
            getFileWord($event){
                 let fileType = $event.target.files[0].name
                fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length) //取得后缀名
                if(fileType.toLowerCase() != 'docx' && fileType.toLowerCase() != 'doc'){
                    this.$message.error('请上传docx 或者 doc文件')
                    return
                }
                 const loading = this.$loading({
                    lock: true,
                    text: '文件上传中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                 })
                 let formData = new FormData();
                 formData.append('file', $event.target.files[0]);
                 this.$http.post('/tes/template?type=2&resourceType=10', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        this.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        loading.close()
                        this.versionWord = $event.target.files[0].name
                         $event.target.value=''
                        this.UrFn()

                    }else{
                        loading.close()
                        $event.target.value=''
                        self.$message.error(res.message)
                    }
                 })
            },
             //实验考试文件上传
            getFile($event){
                let fileType = $event.target.files[0].name
                fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length) //取得后缀名
                if(fileType.toLowerCase() != 'docx' && fileType.toLowerCase() != 'doc'){
                    this.$message.error('请上传docx 或者 doc文件')
                    return
                }
                 const loading = this.$loading({
                    lock: true,
                    text: '文件上传中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                 })
                // console.log( this.versionFile)
                 let formData = new FormData();
                 formData.append('file', $event.target.files[0]);
                 this.$http.post('/tes/template?type=1&resourceType=10', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        this.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        loading.close()
                        this.versionFile = $event.target.files[0].name
                         $event.target.value=''
                         this.init()

                    }else{
                        loading.close()
                         $event.target.value=''
                        self.$message.error(res.message)
                    }
                 })

            },
        }
    }
</script>
<style scoped>
     .mavon-editor-con>>>.v-note-wrapper{
        z-index: 1;
     }
    .mavon-editor-con>>>.fullscreen{
       top: 60px;
    }
    .lessionFiles>>>.v-note-wrapper {
        height: 400px;
    }
    .lessionFiles>>>.fullscreen{
        height: auto !important;
    }
    .lessionFiles>>>.fullscreen{
       top: 60px !important;
    }
</style>
<style scoped lang="scss">
 @import "./../../../styles/ypublic.scss";
 .jx-content{
     margin-top: 20px;
 }
 .fileUploadBox{
       margin-bottom: 30px;
       margin-left: 35px;
       #version-file-input{
            position: absolute;
            left: 0;
            opacity: 0;
            height: 30px;
            top: 0px;
            width: 90px;
            cursor: pointer;
        }
       .uploadBtn{
            margin-right: 30px;
            position: relative;

        }
        .icon-shanchu{
              color: $blue;
              font-size: 18px;
              cursor: pointer;
              margin-right: 5px;
        }

        .darksearch{
            border: 1px solid #c9c9c9;
            height: 32px;
            width: auto;
            text-align: center;
            vertical-align: middle;
            line-height: 30px;
            color: #c9c9c9;
            cursor: pointer;
            border-radius: 20px;
            padding: 0 16px;
            font-size: 14px;
            display: inline-block;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin-left: 10px;
        }
   }
.navBoxs{
    text-align: center;
    margin-bottom: 18px;
    span{
        display: inline-block;
        height: 30px;
    }
    .templateCheck{
        border-bottom:2px solid $yBlue;
        color: $yBlue;
        cursor: pointer;
    }
    .testTemplate{
        cursor: pointer;
        margin-left: 126px
    }
    .reportTemplate{
        margin-left: -5px;
        cursor: pointer;
    }
}
.titleBox{
    height: 18px;
    position: relative;
    line-height: 18px;
    color: $yBlue;
    padding-left: 40px;
    font-weight: bold;
    margin-bottom: 30px;
    .telement-common{
        background: #ecf5ff;
        border: 1px solid #cae4ff;
        border-radius: 5px;
        line-height: 20px;
        height: 20px;
        width: 70px;
        display: inline-block;
        text-align: center;
        color: #56a5ff;
        margin-left: 15px;
        font-size: 12px;
        font-weight: normal

    }
    .telement-me{
        background: #f0f9eb;
        border: 1px solid #d5eec8;
        border-radius: 5px;
        line-height: 20px;
        height: 20px;
        width: 70px;
        display: inline-block;
        text-align: center;
        color: #74c55c;
        margin-left: 15px;
        font-size: 12px;
        font-weight: normal

    }
    i{
        width: 2px;
        height: 15px;
        position: absolute;
        left: 0;
        top: 5px;
        background: $yBlue;
        margin-right: 40px;
    }
}
.button-style{
    padding: 0;
    height: 32px;
    width: 90px;
}
.iconfont{
    color: $yBlue;
    cursor: pointer;
}
.uploadBtn{
    margin-right: 30px;
}
.fileUploadBox{
    margin-bottom: 40px;
}
.saveBox{
    text-align: center;
    margin-top: 40px;
}
</style>
